<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        h2 {
            text-align: center;
            color: #01aaed;
        }

        #Box {
            width: 25%;
            height: auto;
            margin: 5px auto;
        }

        #change {
            visibility: hidden;
        }

    </style>
</head>
<body>
<h2>更改密码</h2>
<div id="Box">
    <input class="layui-input" id="myName" placeholder="请输入你的名字"><br>
    <input class="layui-input" id="myStuid" maxlength="10" minlength="10" placeholder="请输入你的学号"
           type="number"><br>
    <input class="layui-input" id="email" placeholder="请输入你的邮箱" type="email"><br>
    <input class="layui-input" id="p1" placeholder="请输入密码" type="password"><br>
    <input class="layui-input" id="p2" placeholder="请再次输入密码" type="password"><br>
    <input class="layui-input" id="verificationCode" placeholder="请输入验证码"><br>
    <button class="layui-btn layui-btn-primary" id="change">修改密码</button>
    <button class="layui-btn layui-btn-normal" id="verify">发送验证码</button>
</div>
<div class="layui-layer-loading"></div>
</body>
<script>
    let userType = '';
    $("#change").click(function () {
        let myName = document.getElementById("myName").value;
        let stuid = document.getElementById("myStuid").value;
        let code = document.getElementById("verificationCode").value;
        console.log(code)
        $.ajax({
            url: '/user/userStatus',
            method: 'get',
            async: false,
            success: function (data) {
                userType = data.userType;
            }
        })
        if (userType === '1') {
            $.ajax({
                url: '/teacher/getTeacher',
                method: 'get',
                data: {
                    'stuid': stuid
                },
                success: function (data) {
                    if (myName === data.name) {
                        if (equalsWords(document.getElementById("p1").value, document.getElementById("p2").value)) {
                            let password = document.getElementById("p1").value;
                            if (code !== '' || code.length !== 4) {
                                ChangePwd(stuid, password, code)
                            } else {
                                alert('请输入四位数的验证码')
                            }
                        } else {
                            alert('密码不一致请重新输入！')
                        }
                    } else {
                        alert('提供的信息有误')
                    }
                }
            })
        } else if (userType === '2') {
            $.ajax({
                url: '/student/getStudentName',
                method: 'get',
                data: {
                    'stuid': stuid
                },
                success: function (data) {
                    if (myName === data) {
                        if (equalsWords(document.getElementById("p1").value, document.getElementById("p2").value)) {//验证两次密码是否一致
                            let password = document.getElementById("p1").value;
                            if (code !== '' || code.length !== 4) {//更改密码
                                ChangePwd(stuid, password, code)
                            } else {
                                alert('请输入四位数的验证码!')
                            }
                        } else {
                            alert('密码不一致请重新输入！')
                        }
                    } else {
                        alert('提供的信息有误')
                    }
                }
            })
        }
    })
    let verifyBtn = $("#verify");
    verifyBtn.click(function () {
        sendVerificationCode(document.getElementById("email").value)
        verifyBtn.attr('disabled', 'disabled');
        let remainTime = 60;
        verifyBtn.html("重新发送(" + remainTime + ")");
        let id = setInterval(() => {
            remainTime--;
            if (remainTime === 0) {
                verifyBtn.html("重新发送");
                verifyBtn.removeAttr('disabled');
                clearInterval(id);
            } else {
                verifyBtn.html("重新发送(" + remainTime + ")");
            }
        }, 1000)
    })

    function equalsWords(p1, p2) {
        return p1 === p2;
    }

    function ChangePwd(stuid, pwd, code) {
        if (verifyRandomCodes(code)) {
            if (userType === '1') {
                $.ajax({
                    url: '/teacher/alterPassword',
                    method: 'post',
                    data: {
                        'stuid': stuid,
                        'newPassword': pwd
                    },
                    success: function (data) {
                        alert(data.message)
                        if (data.status) {
                            parent.isAltered(true);
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }
                    }
                })
            } else if (userType === '2') {
                $.ajax({
                    url: '/student/alterPwd',
                    method: 'post',
                    data: {
                        'stuid': stuid,
                        'newPassword': pwd
                    },
                    success: function (data) {
                        alert(data.message)
                        if (data.status) {
                            parent.isAltered(true);
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }
                    }
                })
            }
        }
    }

    function verifyRandomCodes(code) {
        let bool = void (0);
        $.ajax({
            url: '/SendEmail/verifyCode',
            method: 'get',
            async: false,
            data: {"code": code},
            success: (data) => {
                bool = data.status;
                alert(data.message);
            }
        })
        return bool;
    }

    function sendVerificationCode(email) {
        $.ajax({
            url: "/SendEmail/sendCode",
            method: 'Post',
            data: {
                'targetEmail': email
            },
            success: function (data) {
                alert(data.message);
                if (data.status) {
                    $('#change').css('visibility', 'visible')
                }
            }
        })
    }
</script>
</html>